import {
  Component,
  Input,
  ChangeDetectorRef
} from '@angular/core';
import {
  DataSource
} from '@angular/cdk/collections';
import {
  BehaviorSubject
} from 'rxjs/BehaviorSubject';
import {
  Observable
} from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import { ApiServiceService } from '../api.service';

@Component({
  selector: 'my-table',
  styleUrls: ['table.component.css'],
  templateUrl: 'table.component.html',
})
export class TableComponent {
  @Input() header: any[];
  @Input() operate: any[];
  private _content;

  @Input()
  set content(content: any[]){

    console.log(content[0]);
    this.changeDetector.detectChanges();
    this._content = content;
    this.testDatabase.dataChange.next(this.content);
  };



  get content(): any[] {
    return this._content;
  }


  displayedColumns = [];
  testDatabase = new TestDatabase();
  dataSource: TestDataSource;

  constructor(private changeDetector: ChangeDetectorRef) {

  }
  ngOnInit (): void {
    this.changeDetector.detectChanges();
    this.header.map((item) =>{
      this.displayedColumns.push(item.id);
    });
    this.testDatabase.dataChange.next(this.content);
    this.dataSource = new TestDataSource(this.testDatabase);
  }
}



export class TestDatabase {
  dataChange: BehaviorSubject < any[] > = new BehaviorSubject < any[] > ([]);
  get data(): any[] {
    return this.dataChange.value;
  }

  constructor( data? ) {
    this.dataChange.next(data);
  }


}

export class TestDataSource extends DataSource < any > {
  constructor(private _exampleDatabase: TestDatabase) {
    super();
  }

  /** Connect function called by the table to retrieve one stream containing the data to render. */
  connect(): Observable < any[] > {

    return this._exampleDatabase.dataChange;
  }

  disconnect() {}
}
